<template>
	<view class="login-warp">
		<view>
			<view class="person-box">
				<view class="person"></view>
			</view>
			<view class="login-form">
				<!-- 为兼容微信小程序需要设置 labelWidth 为 0，且 label 加空格 -->
				<u--form :model="loginForm" ref="loginForm" :rules="loginRules" :errorType="errorType" labelWidth="0">
					<u-form-item label=" " prop="name">
						<u--input v-model="loginForm.name" placeholder="账号" color="#ffffff" prefixIcon="account-fill"
							prefixIconStyle="font-size: 38rpx;color: #ffffff;"
							placeholder-style="color: #FFFFFF;font-size: 30rpx;">
						</u--input>
					</u-form-item>
					<u-form-item label=" " prop="password" class="password-style">
						<u--input v-model="loginForm.password" placeholder="密码" color="#ffffff" prefixIcon="lock-fill"
							prefixIconStyle="font-size: 38rpx;color: #ffffff;"
							placeholder-style="color: #FFFFFF;font-size: 30rpx;" type="password" password>
						</u--input>
					</u-form-item>
					<view style="margin-top: 100rpx;">
						<u-button shape="circle" :loading="loginLoading" @click="userLogin" color="#447aff">登
							录</u-button>
					</view>
				</u--form>
			</view>
			<view class="login-footer">
				<span>Good luck in the Year of the Tiger</span>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	// import { login } from '@/api/user.js'
	export default {
		data() {
			return {
				loginLoading: false,
				loginForm: {
					name: 'lufei',
					password: '123456',
				},
				loginRules: {
					name: [{
						required: true,
						message: '请输入账号！',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码！',
						trigger: ['blur', 'change']
					}]
				},
				errorType: 'toast'
			};
		},
		mounted() {
			// 自动填入上次输入的用户名和密码
			let that = this;
			const userName = uni.getStorageSync('saveName');
			const userPsw = uni.getStorageSync('savePassword');
			if (userName && userPsw) {
				that.loginForm.name = userName;
				that.loginForm.password = userPsw;
			} else {
				that.loginForm.name = '';
				that.loginForm.password = '';
			}
		},
		methods: {
			// userLogin() {
			// 	login({
			// 		name: this.loginForm.name,
			// 		password: this.loginForm.password
			// 	}).then(res => {
			// 		this.$refs.uToast.show({
			// 			message: res.msgContent,
			// 			type: 'error',
			// 			position: 'bottom'
			// 		})
			// 	})
			// },
			userLogin() {
				this.loginLoading = true
				// 将输入的用户名和密码缓存
				uni.setStorage({
					key: 'saveName',
					data: this.loginForm.name
				});
				uni.setStorage({
					key: 'savePassword',
					data: this.loginForm.password
				});

				this.$refs.loginForm.validate().then(res => {
					this.loginLoading = false
					uni.switchTab({
						url: '../business/index'
					});
				}).catch(errors => {
					this.loginLoading = false
				})

				// this.$refs.loginForm.validate().then(res => {
				// 	this.$store.dispatch('user/login', this.loginForm).then(() => {
				// 		this.loginLoading = false
				// 		uni.switchTab({
				// 			url: '../business/index'
				// 		});
				// 	}).catch(err => {
				// 		if (err.msgCode == '200020605' || err.msgCode == '200020607') {
				// 			this.$refs.uToast.show({
				// 				message: err.msgContent,
				// 				type: 'error',
				// 				position: 'bottom'
				// 			})
				// 		} else {
				// 			this.$refs.uToast.show({
				// 				message: "服务出错啦",
				// 				type: 'error',
				// 				position: 'bottom'
				// 			})
				// 		}
				// 		this.loginLoading = false
				// 	});
				// }).catch(errors => {
				// 	this.loginLoading = false
				// })
			}
		}
	};
</script>

<style lang="scss">
	// 兼容微信小程序安卓端密码黑点过大的问题
	input[type="password"].u-input__content__field-wrapper__field {
		font-size: 18rpx !important;
	}

	.login-warp {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/images/login/bg.png');
		background-size: cover;
	}

	.person-box {
		padding-top: 350rpx;
	}

	.person {
		height: 280rpx;
		width: 280rpx;
		margin: 0 auto;
		background: url('@/static/images/login/person.png') no-repeat;
		background-size: cover;
	}

	.login-form {
		padding: 100rpx 120rpx;
	}

	.login-footer {
		height: 78rpx;
		line-height: 78rpx;
		position: fixed;
		bottom: 5rpx;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial, serif;
		font-size: 24rpx;
		letter-spacing: 2rpx;
	}
</style>